<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableList"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <!-- <el-table-column label="日期" width="120" >
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column> -->
      <el-table-column
        v-for="item in tableAttr"
        :label="item.name"
        :width="item.code == 'num' ? 140 : 120"
        align="center"
      >
        <template slot-scope="scope">
          <!-- :src="scope.row[url + item.coverPhoto]" -->
          <img
            v-if="item.attr == 'coverPhoto'"
            :src="`${url}` + `${scope.row.coverPhoto}`"
            alt=""
            width="100"
            height="100"
          />

          <i class="nums center" v-else-if="item.code == 'num'">
            <el-button
              :disabled="scope.row[item.attr] < 2"
              size="mini"
              @click="reduceCartNum(scope.$index, scope.row)"
              >-</el-button
            >
            <div class="num">{{ scope.row[item.attr] }}</div>
            <el-button
              size="mini"
              @click="addCartNum(scope.$index, scope.row)"
              :disabled="scope.row[item.attr] == scope.row.quantity"
              >+</el-button
            >
          </i>
          <i v-else>{{ scope.row[item.attr] }}</i>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="55">
        <template slot-scope="scope">
          <el-button
            type="danger "
            icon="el-icon-delete"
            circle
            @click="handleDelete(scope.$index, scope.row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <!-- <el-button @click="toggleSelection([tableList[1], tableList[2]])"
        >切换第二、第三行的选中状态</el-button
      > -->
      <el-button @click="toggleSelection()">取消选择</el-button>
      <el-button type="primary" @click="moreOrder()">下单</el-button>
    </div>
  </div>
</template>

<script>
import { onlyNumOnePoint } from "@/assets/myjs/function.js";

export default {
  data() {
    return {
      url: localStorage.getItem("url"),
      tableAttr: [
        {
          name: "封面",
          attr: "coverPhoto",
          code: "img",
        },
        {
          name: "书名",
          attr: "bookName",
          code: "text",
        },
        {
          name: "ISBN",
          attr: "isbn",
          code: "text",
        },
        {
          name: "现价",
          attr: "nprice",
          code: "text",
        },
        {
          name: "折后价",
          attr: "price",
          code: "text",
        },
        {
          name: "数量",
          attr: "cartNum",
          code: "num",
        },
        {
          name: "总价",
          attr: "countMoney",
          code: "countMoney",
        },
      ],
      order: [],
    };
  },
  props: ["tableList"],
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    handleDelete(index, row) {
      this.$confirm("确定删除该书籍?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log("cartType=", typeof row.clId, "  =  row.clId=", row.clId);

          let cart = { clId: row.clId };
          this.$axios.post("sys/cart/delete?", cart).then(({ data }) => {
            if (data.code == 201) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: "删除失败!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      this.$emit("refresh");
      console.log(index, row);
    },
    reduceCartNum(index, row) {
      console.log(index, row);
      // console.log("reduce");
      if (row.cartNum > 1) {
        row.cartNum--;
      }

      row.countMoney = onlyNumOnePoint(row.cartNum * row.price);

      this.$axios.post("sys/bookOrder/reduceCartNum", row).then(({ data }) => {
        if (data.code == 201) {
          this.$emit("refresh");
        } else {
          this.$message.info("修改失败！");
        }
      });
    },
    addCartNum(index, row) {
      console.log(index, row);
      // console.log("add");
      if (row.cartNum < row.quantity) {
        row.cartNum++;
      }
      row.countMoney = onlyNumOnePoint(row.cartNum * row.price);

      this.$axios.post("sys/bookOrder/addCartNum", row).then(({ data }) => {
        if (data.code == 201) {
          this.$emit("refresh");
        } else {
          this.$message.info("修改失败！");
        }
      });
    },
    moreOrder() {
      let orderIds = this.multipleSelection.map(({ clId }) => {
        return { clId };
      });

      console.log("multipleSelection=", this.multipleSelection);
      console.log("orderIds=", orderIds);
      this.$axios.post("sys/bookOrder/byCart", orderIds).then(({ data }) => {
        console.log(data);
        if (data.code == 201) {
          this.$message.success("下单成功");
          // this.$emit("refresh");
          this.$parent.findAll();
        }
      });
    },
  },
};
</script>

<style lang='less' scoped>
.num {
  display: inline-block;
  width: 160px;
}
</style>